<template>
  <div class="allBox">
    <div class="top">
      <div class="top_svg">
        <img src="../utils/images/logo.png" width="200px" height="140px" />
      </div>
      <div class="top_title">
        <!-- <div class="top_title_item">搜索</div> -->
        <div class="top_title_item font_red_class">我的</div>
        <div class="top_title_item" @click="titckToShoppingCarPage">购物车</div>
        <div class="top_title_item" @click="titckToOrderPage">订单</div>
        <div class="top_title_item" @click="titckToSaleOutPage">售后</div>
        <div class="top_title_item" @click="titckToContentPage">联系我们</div>
      </div>
      <div class="top_user">
        <div class="top_user_welcome">
          <span class="welcome_span">欢迎：</span>
          <span class="welcome_user" style="color: lightpink">{{
            userName
          }}</span>
        </div>
        <div class="top_user_logo">
          <el-avatar :size="70" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
        </div>
      </div>
    </div>
    <div class="middle">
      <!-- 商品展示模块 -->
      <div class="middle_bar"></div>
      <div class="shop_item_bar">
        <div v-if="shopItemInfoState">
          <div class="shop_item_box">
            <div
              class="shop_item_show"
              v-for="(item,index) in orderListStore.shopItemList"
              :key="index"
              @click="setIntoItemInfo(item)"
            >
              <img
                :src="item.imgUrl"
                width="180px"
                :alt="item.imgName"
                height="205px"
              />
              <div class="shop_item_descript">{{ item.imgName }}</div>
              <div class="shop_item_descript">{{ item.imgResInfo }}</div>
              <div class="shop_item_descript">库存量：{{ item.sale_num }}</div>
              <div class="shop_item_descript font_red_class">
                {{ item.imgPrice }}
              </div>
            </div>
          </div>
        </div>
        <div v-else >
          <div class="shopccc">
            <div class="shopccc_img">
              <img :src="shopDescInfomation.imgUrl" width="250px">
            </div>
            <div class="shopccc_descInfo">
              <div class="shopccc_desc_name">{{ shopDescInfomation.imgName }}</div>
              <div class="shopccc_desc_name">{{ shopDescInfomation.imgResInfo }}</div>
              <div class="shopccc_desc_name shopccc_item_descChange">
                <div class="shopccc_item_descRent">租用价：<span class="font_red_class">{{ shopDescInfomation.imgPrice }}</span><span>/12期</span></div>
                <div class="shopccc_item_descSale">买定价：<span class="font_red_class">{{ shopDescInfomation.imgPrice }}</span></div>
              </div>
              <div>
                <el-button type="primary" size="large" :icon="Lollipop" @click="setVlikkjj">马上租用</el-button>
                <el-button type="success" size="large" :icon="Goods" @click="setSaleOrderInfo">直接购买</el-button>
                <el-button type="danger" size="large" :icon="Star" @click="setShoppingCarInfo">加入购物车</el-button>
              </div>
              <div class="shopccc_desc_back">
                <el-button color="#626aef" dark size="large" @click="showShopItemDescInfo">暂不需要，返回列表</el-button>
              </div>
            </div>
          </div>
        </div>
        <!-- 租用模块对话框 -->
        <el-dialog v-model="centerDialogVisible"  width="500" center>
          <div class="rentShopItemInfo">
            <el-image style="width: 100px; height: 100px" :src="shopDescInfomation.imgUrl" fit="fill" />
            <div style="margin-left: 20px;">
              <el-card style="max-width: 480px">
                <p>原价: <span class="font_red_class">{{ shopDescInfomation.imgPrice }}</span>/期</p>
                <p>今日活动折扣: <span class="font_red_class">{{ pricePrent }}</span> 折</p>
                <p>今日享租价: <span class="font_red_class">¥{{ rentPriceToDay }}</span>/期</p>
              </el-card>
            </div>
            <div style="margin-left: 20px;">
              <div><el-button type="success" @click="commitRentOrder">提交订单</el-button></div>
              <div style="margin-top: 30px;"><el-button type="primary" @click="commitRentOrderOther">其他方式</el-button></div>
            </div>
          </div>
        </el-dialog>
        <!-- 购买模块对话框 -->
        <el-dialog v-model="SaleDialogVisible"  width="500" center>
          <div class="rentShopItemInfo">
            <el-image style="width: 100px; height: 100px" :src="shopDescInfomation.imgUrl" fit="fill" />
            <div style="margin-left: 20px;">
              <el-card style="max-width: 480px">
                <p>原价: <span class="font_red_class">{{ shopDescInfomation.imgPrice }}</span>/期</p>
                <p>今日活动折扣: <span class="font_red_class">{{ pricePrent }}</span> 折</p>
                <p>今日定音价: <span class="font_red_class">¥{{ salePriveToDay }}</span></p>
              </el-card>
            </div>
            <div style="margin-left: 20px;">
              <div><el-button type="success" @click="commitRentOrder">提交订单</el-button></div>
              <div style="margin-top: 30px;"><el-button type="primary" @click="commitRentOrderOther">其他方式</el-button></div>
            </div>
          </div>
        </el-dialog>
      </div>
      <!-- 商品展示模块结束 -->
    </div>
    <div class="botton"></div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
//导入商品图片
import { Goods,Lollipop,Star } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { useOrderListStore } from '../store/OrderList'

const orderListStore = useOrderListStore();
let router = useRouter();
let userName = "user1000001";
let shopItemInfoState = ref(true); //设置属性盒子隐藏

let shopDescInfomation = ref('');

let centerDialogVisible = ref(false);
let SaleDialogVisible = ref(false);
//今日折扣
let pricePrent = ref(8);
//今日活动价（租）
let rentPriceToDay = ref();
//今日定音价（买）
let salePriveToDay = ref();


function setIntoItemInfo(item) {
  //跳转路由
  // router.push('')
  shopItemInfoState.value = !shopItemInfoState.value;
  shopDescInfomation.value = JSON.parse(JSON.stringify(item));
  // console.log(shopDescInfomation.value)
}
function showShopItemDescInfo() {
  shopItemInfoState.value = !shopItemInfoState.value;
}
function setVlikkjj(){
  //租用事件
  centerDialogVisible.value = !centerDialogVisible.value //打开窗口
  //删去价格前符号并返回
  // console.log(shopDescInfomation.value.imgPrice.split('').slice(1).join(''))
  rentPriceToDay.value = Math.ceil((shopDescInfomation.value.imgPrice.split('').slice(1).join(''))*pricePrent.value/10/12);
}
function setSaleOrderInfo(){
  //购买事件
  SaleDialogVisible.value = !SaleDialogVisible.value
  salePriveToDay.value = Math.ceil((shopDescInfomation.value.imgPrice.split('').slice(1).join(''))*pricePrent.value/10)
}
function commitRentOrder(){
  //租用模式提交订单
  ElMessage({
    message: '已提交订单，请留意订单处理结果通知',
    type: 'success',
    showClose: true,
  })
  let newDateId = ref('');
  newDateId.value =  orderListStore.userInfo.userName +  Date.now().toString();
  // console.log(newDateId.value,'_id');
  let typeModelNmae = ref('');
  if(centerDialogVisible.value){
    typeModelNmae.value = 'rent'
  };
  if(SaleDialogVisible.value){
    typeModelNmae.value = 'sale'
  }
  //添加订单列表
  orderListStore.orderList.push({
    imgUrl:shopDescInfomation.value.imgUrl,
    imgName:shopDescInfomation.value.imgName,
    imgResInfo:shopDescInfomation.value.imgResInfo,
    imgPrice:shopDescInfomation.value.imgPrice,
    orderType:typeModelNmae.value,
    _id:newDateId.value,
    sale_num:5
  })
  //关闭对话框
  if(centerDialogVisible.value){
    centerDialogVisible.value = !centerDialogVisible.value
  }
  if(SaleDialogVisible.value){
    SaleDialogVisible.value = !SaleDialogVisible.value
  }
  shopItemInfoState.value = !shopItemInfoState.value;
}
function commitRentOrderOther(){
  //其他方式订单处理
  ElMessage({
    message: '已提交申请，请留意卖家结果通知',
    type: 'success',
    showClose: true,
  })
  //关闭对话框
  if(centerDialogVisible.value){
    centerDialogVisible.value = !centerDialogVisible.value
  }
  if(SaleDialogVisible.value){
    SaleDialogVisible.value = !SaleDialogVisible.value
  }
  shopItemInfoState.value = !shopItemInfoState.value;
}
function setShoppingCarInfo(){
  //加入购物车选项
  ElMessage({
    message: '已添加至购物车',
    type: 'success',
    showClose: true,
  })
  let typeModelNmae = ref('');
  if(centerDialogVisible.value){
    typeModelNmae.value = 'rent'
  };
  if(SaleDialogVisible.value){
    typeModelNmae.value = 'sale'
  }
  let newDateId = ref('');
  newDateId.value =  orderListStore.userInfo.userName +  Date.now().toString();
   //添加订单列表
   orderListStore.shoppingCarList.push({
    imgUrl:shopDescInfomation.value.imgUrl,
    imgName:shopDescInfomation.value.imgName,
    imgResInfo:shopDescInfomation.value.imgResInfo,
    imgPrice:shopDescInfomation.value.imgPrice,
    orderType:typeModelNmae.value,
    _id:newDateId.value,
    sale_num:5
  })
  shopItemInfoState.value = !shopItemInfoState.value;
  // console.log(orderListStore.shoppingCarList,'123')
}
function titckToOrderPage(){
  //跳转前往路由
  router.push('/order')
}
function titckToShoppingCarPage(){
  //跳转购物车页面
  router.push('/shoppingcar')
}
function titckToSaleOutPage(){
  //跳转售后页面
  router.push('/saleOut')
}
function titckToContentPage(){
  //跳转至联系我们
  router.push('/content')
}
</script>

<script>
export default {
  name: "Shoping", //组件名
};
</script>

<style scoped>
.allBox {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  overflow: auto;
  scrollbar-width: none;
}
.allBox::-webkit-scrollbar {
  display: none;
}
.top {
  height: 140px;
  display: flex;
}
.top_svg {
  width: 200px;
}
.top_title {
  width: 70vw;
  display: flex;
  padding: 0 20px;
}
.top_title_item {
  width: 100px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(75, 188, 225);
  font-size: 20px;
  margin: 0 20px;
}
.top_title_item:hover {
  font-size: 25px;
  cursor: pointer;
}
.top_user {
  flex: 1;
  display: flex;
}
.top_user_welcome {
  width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.welcome_span {
  font-style: oblique;
  font-size: 20px;
}
.top_user_logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.top_user_logo_box {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}
.middle {
  height: 80vh;
  margin-top: 10px;
}
.middle_bar {
  height: 10px;
  box-shadow: 1px 1px #252424;
}
.shop_item_bar {
  margin-top: 10px;
  height: 400px;
  padding: 10px 200px;
  overflow: auto;
  scrollbar-width: none;
}
.shop_item_bar::-webkit-scrollbar {
  display: none;
}
.shop_item_box {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}
.shop_item_show {
  width: 200px;
  padding: 10px;
  margin: 10px;
  box-sizing: border-box;
  cursor: pointer;
}
.shop_item_show:hover {
  border: 1px solid #939191;
}
.shop_item_descript {
  height: 20px;
  line-height: 20px;
  margin: 8px 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.font_red_class {
  color: red;
}
.shopccc {
  height: 380px;
  border: 1px solid rgb(190, 190, 193);
  box-sizing: border-box;
  display: flex;
}
.shopccc_img{
  width: 400px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
.shopccc_descInfo{
  flex: 1;
  box-sizing: border-box;
  margin-left: 10px;
  padding: 20px 0 10px 50px;
}
.shopccc_desc_name{
  height: 30px;
  line-height: 30px;
  font-size: 20px;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shopccc_item_descChange{
  width: 600px;
  margin-top: 50px;
  margin-bottom: 50px;
  display: flex;
  align-content: center;
  justify-content: space-around;
  height: 40px;
  line-height: 40px;
  font-size: 30px;
}
.shopccc_desc_back{
  box-sizing: border-box;
  margin-top: 20px;
}
.rentShopItemInfo{
  box-sizing: border-box;
  display: flex;
}
</style>